<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/template.css" media="all">
    <link rel="stylesheet" href="/modules/guild/home.css?v=1.0">
</head>

<body>

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header  layui-row">
                        <div class="layui-col-md2">
                            <h2>核心数据</h2>
                        </div>
                        <div class="layui-col-md5 day_btn_area" id="dayBtnArea">
                            <span class="active" data-type="1">今日</span>
                            <span data-type="2">昨日</span>
                            <span data-type="3">本月</span>
                        </div>
                        <div class="layui-col-md5 data_refresh">
                            <span class="refresh" id="refreshBtn"><i class="layui-icon layui-icon-refresh"></i>刷新</span>
                            <span>数据截止今日<em id="hourArea">-</em></span>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <ul class="layui-row data_statis">
                            <!-- <li class="layui-col-md2">
                                <div class="statis_title">IP总访问量</div>
                                <p><strong id="totalDiamond">-</strong><span></span></p>
                            </li> -->
                            <li class="layui-col-md2">
                                <div class="statis_title">管理主播总数</div>
                                <p><strong id="manageAnchor">-</strong><span>人</span></p>
                            </li>
                            <li class="layui-col-md2">
                                <div class="statis_title">入住主播数</div>
                                <p><strong id="joinAnchor">-</strong><span>人</span></p>
                            </li>
                            <li class="layui-col-md2">
                                <div class="statis_title">开播人数</div>
                                <p><strong id="onliveAnchor">-</strong><span>人</span></p>
                            </li>
                            <li class="layui-col-md2">
                                <div class="statis_title">注册用户</div>
                                <p><strong id="registCount">-</strong><span>人</span></p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header layui-row on_live_statis">
                        <div class="layui-col-md10">
                            <h2>正在直播<strong>{$live_count|default=0}人</strong></h2>
                        </div>
                        <!-- <div class="layui-col-md2 live_monitor_btn">
                            <a lay-href="{:url('live/dashboard')}">直播画面监控</a>
                        </div> -->
                    </div>
                    <div class="layui-card-body">
                        <ul class="layui-row on_live_user">
                            {volist name='on_live' id='item'}
                            <li>
                                <div class="user_avatar"
                                    style="background-image: url('{$item.user?$item.user.avatar:''}')"></div>
                                <p>{$item.title}</p>
                                <p><i class="layui-icon layui-icon-username"></i>{$item.user?$item.user.nick_name:''}
                                </p>
                            </li>
                            {/volist}
                        </ul>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header layui-row on_live_statis">
                        <div class="layui-col-md10">
                            <h2>渠道转换留存</h2>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <table id="LAY-home-channel" lay-filter="LAY-home-channel"></table>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header layui-row on_live_statis">
                        <div class="layui-col-md10">
                            <h2>近期数据统计</h2>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <table id="LAY-home-stat" lay-filter="LAY-home-stat"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {include file='index/common' /}

    <script src="/layuiadmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: '/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'admin', 'form', 'table', 'guild/home'], function () {
            var $ = layui.$,
                admin = layui.admin,

                form = layui.form,
                table = layui.table;

            /**
             * 获取核心数据统计
             * @param type 1今日，2=昨日，3=本月
             */
            function getDataStatis(type) {
                $.ajax({
                    url: "{:url('index/data_statis')}",
                    type: 'get',
                    data: { type: type },
                    dataType: 'json',
                    success: function (json) {
                        $('#hourArea').text(json.hour_str)
                        $('#totalDiamond').text(json.total_diamond)
                        $('#manageAnchor').text(json.manage_anchor)
                        $('#joinAnchor').text(json.join_anchor)
                        $('#onliveAnchor').text(json.onlive_anchor)
                        $('#registCount').text(json.regist_count)
                    },
                    error: function (err) {

                    }
                });
            }

            getDataStatis(1);

            //今日、昨日、本月数据统计
            $('#dayBtnArea span').on('click', function () {
                $('#dayBtnArea span').removeClass('active');
                $(this).addClass('active');
                var this_type = $(this).data('type');
                getDataStatis(this_type)

            })

            // 手动刷新
            $('#refreshBtn').on('click', function () {
                autoRefresh()
            })

            // 自动刷新
            setTimeout(function () {
                autoRefresh();
            }, 10000);

            function autoRefresh() {
                var this_type = $('#dayBtnArea span.active').data('type');
                getDataStatis(this_type)
            }

        });


    </script>
</body>

</html>